<!--根据以下官方例子进行修改-->
<!--https://github.com/jgraph/mxgraph/blob/master/javascript/examples/anchors.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchors example for mxGraph</title>
    <style>
    html, body {
        height: 100%;
    }

    #graphContainer {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background: url('./images/grid.gif');
        cursor: default;
    }
    </style>
</head>

<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer"></div>
</body>

<script>
const mxBasePath = '../static/mxgraph';
</script>

<!-- Loads and initializes the library -->
<script src="../mxClient.js"></script>
<script>
// Overridden to define per-shape connection points
// 重写以定义每个形状的连接点
mxGraph.prototype.getAllConnectionConstraints = function (terminal, source) {
  if (terminal != null && terminal.shape != null) {
    if (terminal.shape.stencil != null) {
      if (terminal.shape.stencil != null) {
        return terminal.shape.stencil.constraints;
      }
    } else if (terminal.shape.constraints != null) {
      return terminal.shape.constraints;
    }
  }

  return null;
};
// 定义靶点
mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
  new mxConnectionConstraint(new mxPoint(0.5, 0), true),
  new mxConnectionConstraint(new mxPoint(0.75, 0), true),
  new mxConnectionConstraint(new mxPoint(0, 0.25), true),
  new mxConnectionConstraint(new mxPoint(0, 0.5), true),
  new mxConnectionConstraint(new mxPoint(0, 0.75), true),
  new mxConnectionConstraint(new mxPoint(1, 0.25), true),
  new mxConnectionConstraint(new mxPoint(1, 0.5), true),
  new mxConnectionConstraint(new mxPoint(1, 0.75), true),
  new mxConnectionConstraint(new mxPoint(0.25, 1), true),
  new mxConnectionConstraint(new mxPoint(0.5, 1), true),
  new mxConnectionConstraint(new mxPoint(0.75, 1), true)];

function main(container) {
  const graph = new mxGraph(container);
  graph.setConnectable(true);
  graph.setAllowDanglingEdges(false);
  const parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();
  try {
    graph.insertVertex(parent, null, 'A', 20, 20, 80, 80);
    graph.insertVertex(parent, null, 'B', 200, 150, 80, 80);
  } finally {
    graph.getModel().endUpdate();
  }

  const alertAnchor = (sender, evt) => {
    const edge = evt.properties.cells[0];
    alert(edge.style);
  };

  // 初次连接边
  graph.addListener(mxEvent.ADD_CELLS, (...args) => {
    setTimeout(() => {
      // 初次连接边无法获取 靶点坐标，异步处理后可获取
      alertAnchor(...args)
    }, 0);
  });
  // 二次连接边
  graph.addListener(mxEvent.CONNECT_CELL, alertAnchor);
}
</script>
</html>
